<template>
  <div class="main">
    <el-date-picker v-model="time" @clear="clear" :type="type" :placeholder="placeholder_format" :size="size" @change="change" :disabled="props.disabled && props.disabled == 1" />
  </div>
</template>

<script lang="ts" setup>
import { computed, watch } from "vue";
const { proxy } = getCurrentInstance();
let props = defineProps([
  "modelValue",
  "size",
  "type",
  "disabled",
  "placeholder",
]);
const emit = defineEmits(["update:modelValue", "fatherMethods"]);

let time = ref("");
let size = computed(() => {
  return props.size ? props.size : "default";
});
let type = computed(() => {
  return props.type ? props.type : "date";
});
let placeholder_format = computed(() => {
  return props.placeholder ? props.placeholder : "请选择日期";
});

function clear() {
  console.log("clear");
}

let change = (val) => {
  let date;
  switch (props.type) {
    case "datetime":
      date = proxy.$utils.dateTimeFormateFn(val, "all");
      break;
    case "year":
      date = proxy.$utils.dateTimeFormateFn(val, "year");
      break;
    case "month":
      date = proxy.$utils.dateTimeFormateFn(val, "month");
      break;
    default:
      date = proxy.$utils.dateTimeFormateFn(val);
      break;
  }
  emit("update:modelValue", date);
  emit("fatherMethods", date);
};

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue) {
      let date = new Date();
      switch (props.type) {
        case "year":
          date.setFullYear(newValue);
          time.value = date;
          break;
        case "month":
          date.setMonth(Number(newValue) - 1);
          time.value = date;
          break;
        default:
          time.value = newValue;
          break;
      }
    } else {
      time.value = "";
    }
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.main {
  width: 100%;

  ::v-deep(.el-date-editor) {
    width: 100%;
  }
}
</style>
